<template>
  <div id="searchBar" >
    <p>输入后按下回车搜索 ...</p>
    <span>搜索</span>
    <input type="text" v-model="searchContent">
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 搜索框内容
            searchContent:''
        }
    },
    methods: {
        // 按下回车搜索事件
        search(searchContent) {
            // 跳转到搜索页面
            this.$router.push({
                path: "/more",
                query: {
                    theme: searchContent,
                    search: true
                }
            })
            // 若路由跳转后还在当前页面(/more页面)，则完成跳转后刷新当前页面，重新获取数据
            if(this.$route.path == "/more") {
                this.$router.go(0)
            }
            // 关闭悬浮窗
            this.SearchBarShow()
        },
    },
    // 监听用户是否按下回车键
    created() {
        let that = this
        document.onkeydown = (e) => {
            e = window.event || e
            if (e.code == 'Enter' || e.code == 'enter') {
                that.search(this.searchContent)
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    #searchBar {
        height: 98%;
        width: 98%;
        background-color: rgba(255,255,255,.9);
        position: fixed;
        top: 1%;
        left: 1%;
        z-index: 99;
    }
    p,input {
        color: black;
        display: block;
        text-align: center;
        margin: 20px auto;
    }
    p {
        margin-top: 20%;
    }
    span {
        position: absolute;
        left: 26%;
        line-height: 40px;
    }
    input {
        padding: 0 60px;
        height: 40px;
        width: 50%;
        border: solid 2px $color-background-assistant;
        border-radius: 20px;
        box-sizing:border-box;
        overflow: hidden;
        text-align: left;
    }
</style>